<template>
  <div class="dashboard-editor-container">
    <panel-group/>

    <el-row :gutter="24">
      <el-col :span="18">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>快捷入口</span>
            </div>
            <div class="text item" style="min-height: 220px">
              <el-row :gutter="24" style="height: 60px">
                <el-col :span="3">
                  <el-button type="primary" icon="el-icon-edit" @click="customerDialogVisible = true">新增客户</el-button>
                </el-col>
                <el-col :span="3">
                  <router-link to="/customer/sign">
                    <el-button type="primary" icon="el-icon-edit">学员报名</el-button>
                  </router-link>
                </el-col>
              </el-row>
              <el-row :gutter="24" style="height: 60px">
                <el-col :span="3">
                  <router-link to="/education/student">
                    <el-button type="success" icon="el-icon-check">选班排班</el-button>
                  </router-link>
                </el-col>
                <el-col :span="3">
                  <router-link to="/finance/bill">
                    <el-button type="info" icon="el-icon-message">上课记录</el-button>
                  </router-link>
                </el-col>
                <el-col :span="3">
                  <router-link to="/education/schedule">
                    <el-button type="warning" icon="el-icon-star-off">课表管理</el-button>
                  </router-link>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </div>
      </el-col>

      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>机构基本信息</span>
          </div>
          <div class="text item" style="min-height: 220px">
            <el-form :model="merchant" label-width="100px">
              <el-row>
                <el-form-item label="机构名称">{{ merchant.name }}</el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="机构地址">{{ merchant.address }}</el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="主营课程">{{ merchant.courseCategories }}</el-form-item>
              </el-row>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="24" style="margin-top: 32px">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <funnel-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <source-chart/>
        </div>
      </el-col>
    </el-row>
    <customer-form-dialog :visible="customerDialogVisible" is-private="1" :type="customerDialogType" @close="closeCustomerFormDialog" />
  </div>
</template>

<script>
import { getMerchantDetail } from '@/api/merchant'
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import FunnelChart from './components/FunnelChart'
import SourceChart from './components/SourceChart'
import CustomerFormDialog from '@/views/customer/module/formDialog'
export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup,
    LineChart,
    FunnelChart,
    SourceChart,
    CustomerFormDialog
  },
  data() {
    return {
      merchant: {},
      customerDialogVisible: false,
      customerDialogType: 'add'
    }
  },
  mounted() {
    getMerchantDetail().then(res => {
      this.merchant = res.data
    })
  },
  methods: {
    closeCustomerFormDialog(isRefresh) {
      this.customerDialogVisible = false
      if (isRefresh) {
        this.$confirm('新增客户成功！', '提示', {
          confirmButtonText: '查看公池列表',
          cancelButtonText: '留在此页',
          type: 'warning'
        }).then(() => {
          this.$router.push('/customer/public')
        })
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>
